<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理 - 员工列表</title>
    <link rel="stylesheet" href="../../css/style.css">
<style>
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; }
.modal-content { background-color: #fff; margin: auto; margin-top: 50px; padding: 20px; width:70%; max-width: 800px; border-radius: 8px; position: relative; }
.close-btn { position: absolute; right: 20px; top: 20px; font-size:28px; cursor:pointer; }
.detail-container { padding: 20px; }
.detail-item { display: flex; margin-bottom: 15px; }
.detail-label { width: 30%; font-weight: bold; padding-right: 10px; text-align: right; }
.detail-value { width: 70%; }
.edit-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; }
.edit-modal-content { background-color: #fff; margin: auto; margin-top: 50px; padding: 20px; width:70%; max-width: 800px; border-radius: 8px; position: relative; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
.action-buttons { margin-top: 20px; }
</style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../../js/utils.js"></script>
    <script src="../../js/api.js"></script>
    <script type="module" src="../../js/components/navigation.js"></script>
</head>
<body>
    <div class="app-container">
        <header class="app-header">
            <div class="logo">员工管理系统</div>
            <div class="user-info">
                <span id="username-display"></span>
                <button id="logout-btn" class="btn btn-secondary">退出登录</button>
            </div>
        </header>

        <div class="app-body">
            <aside class="sidebar">
                <nav class="menu">
                    <ul>
                        <li><a href="#" class="menu-item active" data-target="welcome">欢迎页</a></li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">员工管理</a>
                            <ul class="submenu">
                                <li><a href="../employee/list.html" class="submenu-item">员工列表</a></li>
                                <li><a href="../employee/add.html" class="submenu-item">添加员工</a></li>
                            </ul>
                        </li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">业务管理</a>
                            <ul class="submenu">
                                <li><a href="../business/list.html" class="submenu-item">业务列表</a></li>
                                <li><a href="../business/create.html" class="submenu-item">创建业务</a></li>
                            </ul>
                        </li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">薪酬管理</a>
                            <ul class="submenu">
                                <li><a href="../salary/overview.html" class="submenu-item">薪酬概览</a></li>
                                <li><a href="../salary/manage.html" class="submenu-item">薪酬管理</a></li>
                            </ul>
                        </li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">系统设置</a>
                            <ul class="submenu">
                                <li><a href="../system/user.html" class="submenu-item">用户管理</a></li>
                                <li><a href="../system/profile.html" class="submenu-item">个人设置</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </aside>

            <main class="content">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">员工列表</h2>
                        <a href="add.html" class="btn btn-primary">添加员工</a>
                    </div>
                    <div class="search-container">
                        <input type="text" id="search-input" class="search-input" placeholder="请输入员工姓名或部门">
                        <button id="search-btn" class="search-btn">搜索</button>
                    </div>
                    <div class="table-container">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>姓名</th>
                                    <th>年龄</th>
                                    <th>职位</th>
                                    <th>部门</th>
                                    <th>入职日期</th>
                                    <th>薪资</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="employee-table-body">
                                <!-- 员工数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                    <div class="pagination">
                        <span class="pagination-item">上一页</span>
                        <span class="pagination-item active">1</span>
                        <span class="pagination-item">2</span>
                        <span class="pagination-item">3</span>
                        <span class="pagination-item">下一页</span>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        $(document).ready(function() {
  // 模态框相关元素
const modal = $('#detail-modal');
const modalDetail = $('#modal-employee-detail');
const editModal = $('#edit-modal');
const editForm = $('#edit-employee-form');
const closeBtn = $('.close-btn');
const cancelEditBtn = $('.cancel-edit-btn');

  // 关闭模态框
closeBtn.click(function() { modal.hide(); editModal.hide(); });
$(window).click(function(e) { 
  if (e.target === modal[0]) modal.hide(); 
  if (e.target === editModal[0]) editModal.hide(); 
});

// 取消编辑按钮点击事件
cancelEditBtn.click(function() { editModal.hide(); });

// 编辑按钮点击事件
$(document).on('click', '.edit-btn', function() {
  const id = $(this).data('id');
  loadEmployeeForEdit(id);
});

// 加载员工数据到编辑表单
function loadEmployeeForEdit(id) {
  // 显示加载中
  editForm.html('<div style="text-align: center; padding: 40px;"><i class="fas fa-spinner fa-spin fa-3x"></i><p style="margin-top: 15px;">正在加载员工数据...</p></div>');
  editModal.show();

  // 模拟数据
  const employee = {
    id: id,
    name: '张三',
    age: 30,
    position: '高级前端工程师',
    department: '技术部',
    hireDate: '2020-01-15',
    salary: 15000,
    phone: '13800138000',
    email: 'zhangsan@example.com'
  };

  // 模拟API延迟
  setTimeout(() => {
    // 恢复表单HTML
    const formHTML = `
      <input type="hidden" id="edit-employee-id" name="id" value="${employee.id}">
      <div class="form-group">
        <label for="edit-name">姓名 <span style="color: red;">*</span></label>
        <input type="text" id="edit-name" name="name" placeholder="请输入姓名" value="${employee.name}">
      </div>
      <div class="form-group">
        <label for="edit-age">年龄 <span style="color: red;">*</span></label>
        <input type="number" id="edit-age" name="age" placeholder="请输入年龄" value="${employee.age}">
      </div>
      <div class="form-group">
        <label for="edit-position">职位 <span style="color: red;">*</span></label>
        <input type="text" id="edit-position" name="position" placeholder="请输入职位" value="${employee.position}">
      </div>
      <div class="form-group">
        <label for="edit-department">部门 <span style="color: red;">*</span></label>
        <select id="edit-department" name="department">
          <option value="">请选择部门</option>
          <option value="技术部" ${employee.department === '技术部' ? 'selected' : ''}>技术部</option>
          <option value="市场部" ${employee.department === '市场部' ? 'selected' : ''}>市场部</option>
          <option value="人事部" ${employee.department === '人事部' ? 'selected' : ''}>人事部</option>
          <option value="销售部" ${employee.department === '销售部' ? 'selected' : ''}>销售部</option>
          <option value="财务部" ${employee.department === '财务部' ? 'selected' : ''}>财务部</option>
        </select>
      </div>
      <div class="form-group">
        <label for="edit-hireDate">入职日期 <span style="color: red;">*</span></label>
        <input type="date" id="edit-hireDate" name="hireDate" value="${employee.hireDate}">
      </div>
      <div class="form-group">
        <label for="edit-salary">薪资 <span style="color: red;">*</span></label>
        <input type="number" id="edit-salary" name="salary" placeholder="请输入薪资" step="0.01" value="${employee.salary}">
      </div>
      <div class="form-group">
        <label for="edit-phone">手机号码</label>
        <input type="text" id="edit-phone" name="phone" placeholder="请输入手机号码" value="${employee.phone}">
      </div>
      <div class="form-group">
        <label for="edit-email">电子邮箱</label>
        <input type="email" id="edit-email" name="email" placeholder="请输入电子邮箱" value="${employee.email}">
      </div>
      <div class="action-buttons">
        <button type="submit" class="btn btn-primary">保存</button>
        <button type="button" class="btn btn-secondary cancel-edit-btn">取消</button>
      </div>
    `;
    editForm.html(formHTML);
  }, 800);
}

// 编辑表单提交事件
editForm.submit(function(e) {
  e.preventDefault();

  // 表单验证
  const name = $('#edit-name').val().trim();
  const age = $('#edit-age').val().trim();
  const position = $('#edit-position').val().trim();
  const department = $('#edit-department').val().trim();
  const hireDate = $('#edit-hireDate').val().trim();
  const salary = $('#edit-salary').val().trim();

  if (!name || !age || !position || !department || !hireDate || !salary) {
    alert('请填写所有必填字段');
    return;
  }

// 模拟API提交
setTimeout(() => {
  alert('员工信息更新成功');
  editModal.hide();
  loadEmployeeList(); // 更新列表数据
}, 800);
});

  // 查看详情按钮点击事件
  $(document).on('click', '.view-detail-btn', function() {
    const id = $(this).data('id');
    showEmployeeDetail(id);
  });

  function showEmployeeDetail(id) {
    // 显示加载中
    modalDetail.html('<div style="text-align: center; padding: 40px;"><i class="fas fa-spinner fa-spin fa-3x"></i><p style="margin-top: 15px;">正在加载员工详情...</p></div>');
    modal.show();

    // 模拟数据
    const employee = {
      id: id,
      name: '张三',
      age: 30,
      position: '高级前端工程师',
      department: '技术部',
      hireDate: '2020-01-15',
      salary: 15000,
      phone: '13800138000',
      email: 'zhangsan@example.com'
    };

    // 模拟API延迟
    setTimeout(() => {
      let detailHTML = `
        <div class="detail-item"><div class="detail-label">ID</div><div class="detail-value">${employee.id}</div></div>
        <div class="detail-item"><div class="detail-label">姓名</div><div class="detail-value">${employee.name}</div></div>
        <div class="detail-item"><div class="detail-label">年龄</div><div class="detail-value">${employee.age}岁</div></div>
        <div class="detail-item"><div class="detail-label">职位</div><div class="detail-value">${employee.position}</div></div>
        <div class="detail-item"><div class="detail-label">部门</div><div class="detail-value">${employee.department}</div></div>
        <div class="detail-item"><div class="detail-label">入职日期</div><div class="detail-value">${Formatter.formatDate(employee.hireDate)}</div></div>
        <div class="detail-item"><div class="detail-label">薪资</div><div class="detail-value">${Formatter.formatMoney(employee.salary)}</div></div>
        <div class="detail-item"><div class="detail-label">手机号码</div><div class="detail-value">${employee.phone ? `<a href="tel:${employee.phone}">${employee.phone}</a>` : '未提供'}</div></div>
        <div class="detail-item"><div class="detail-label">电子邮箱</div><div class="detail-value">${employee.email ? `<a href="mailto:${employee.email}">${employee.email}</a>` : '未提供'}</div></div>
      `;
      modalDetail.html(detailHTML);
      $('#modal-employee-name').text(`${employee.name} - 员工详情`);
    },800);
  };
            // 检查登录状态
            checkLoginStatus();

            // 显示用户名
            const username = localStorage.getItem('username');
            if (username) {
                $('#username-display').text(username);
            }

            // 退出登录
            $('#logout-btn').click(function() {
                localStorage.removeItem('token');
                localStorage.removeItem('username');
                window.location.href = '../../index.html';
            });

            // 加载员工列表
            loadEmployeeList();

            // 搜索按钮点击事件
            $('#search-btn').click(function() {
                loadEmployeeList();
            });

            // 按下回车键搜索
            $('#search-input').keypress(function(e) {
                if (e.which === 13) {
                    loadEmployeeList();
                }
            });

            function checkLoginStatus() {
                const token = localStorage.getItem('token');
                if (!token) {
                    window.location.href = '../../index.html';
                }
            }

            function loadEmployeeList() {
                const searchKeyword = $('#search-input').val().trim();

                // 显示加载中
                $('#employee-table-body').html('<tr><td colspan="8" style="text-align: center;">加载中...</td></tr>');

                // 调用API获取员工列表
                window.api.employee.getList({ keyword: searchKeyword })
                    .then(data => {
                        // 清空表格
                        $('#employee-table-body').empty();

                        // 检查数据
                        if (!data || !data.data || data.data.length === 0) {
                            $('#employee-table-body').html('<tr><td colspan="8" style="text-align: center;">暂无数据</td></tr>');
                            return;
                        }

                        // 填充表格
                        data.data.forEach(employee => {
                            const row = $('<tr></tr>');
                            row.append(`<td>${employee.id}</td>`);
                            row.append(`<td>${employee.name}</td>`);
                            row.append(`<td>${employee.age}</td>`);
                            row.append(`<td>${employee.position}</td>`);
                            row.append(`<td>${employee.department}</td>`);
                            row.append(`<td>${Formatter.formatDate(employee.hireDate)}</td>`);
                            row.append(`<td>${Formatter.formatMoney(employee.salary)}</td>`);
                            row.append(`
                                <td>
                                    <button class="btn btn-secondary view-detail-btn" data-id="${employee.id}">查看</button>
                                    <button class="btn btn-primary edit-btn" data-id="${employee.id}">编辑</button>
                                    <button class="btn btn-danger delete-btn" data-id="${employee.id}">删除</button>
                                </td>
                            `);
                            $('#employee-table-body').append(row);
                        });

                        // 绑定删除按钮事件
                        $('.delete-btn').click(function() {
                            const id = $(this).data('id');
                            if (confirm('确定要删除该员工吗？')) {
                                deleteEmployee(id);
                            }
                        });
                    })
                    .catch(error => {
                        console.error('Failed to load employee list:', error);
                        $('#employee-table-body').html('<tr><td colspan="8" style="text-align: center;">加载失败，请重试</td></tr>');
                    });
            }

            function deleteEmployee(id) {
                window.api.employee.delete(id)
                    .then(response => {
                        if (response && response.success) {
                            alert('删除成功');
                            loadEmployeeList(); // 重新加载列表
                        } else {
                            alert('删除失败');
                        }
                    })
                    .catch(error => {
                        console.error('Failed to delete employee:', error);
                        alert('删除失败，请重试');
                    });
            }
        });
    </script>
<!-- 员工编辑模态框 -->
<div id="edit-modal" class="edit-modal">
  <div class="edit-modal-content">
    <span class="close-btn">&times;</span>
    <div class="form-container">
      <h2 class="form-title">编辑员工</h2>
      <form id="edit-employee-form">
        <input type="hidden" id="edit-employee-id" name="id">
        <div class="form-group">
          <label for="edit-name">姓名 <span style="color: red;">*</span></label>
          <input type="text" id="edit-name" name="name" placeholder="请输入姓名">
        </div>
        <div class="form-group">
          <label for="edit-age">年龄 <span style="color: red;">*</span></label>
          <input type="number" id="edit-age" name="age" placeholder="请输入年龄">
        </div>
        <div class="form-group">
          <label for="edit-position">职位 <span style="color: red;">*</span></label>
          <input type="text" id="edit-position" name="position" placeholder="请输入职位">
        </div>
        <div class="form-group">
          <label for="edit-department">部门 <span style="color: red;">*</span></label>
          <select id="edit-department" name="department">
            <option value="">请选择部门</option>
            <option value="技术部">技术部</option>
            <option value="市场部">市场部</option>
            <option value="人事部">人事部</option>
            <option value="销售部">销售部</option>
            <option value="财务部">财务部</option>
          </select>
        </div>
        <div class="form-group">
          <label for="edit-hireDate">入职日期 <span style="color: red;">*</span></label>
          <input type="date" id="edit-hireDate" name="hireDate">
        </div>
        <div class="form-group">
          <label for="edit-salary">薪资 <span style="color: red;">*</span></label>
          <input type="number" id="edit-salary" name="salary" placeholder="请输入薪资" step="0.01">
        </div>
        <div class="form-group">
          <label for="edit-phone">手机号码</label>
          <input type="text" id="edit-phone" name="phone" placeholder="请输入手机号码">
        </div>
        <div class="form-group">
          <label for="edit-email">电子邮箱</label>
          <input type="email" id="edit-email" name="email" placeholder="请输入电子邮箱">
        </div>
        <div class="action-buttons">
          <button type="submit" class="btn btn-primary">保存</button>
          <button type="button" class="btn btn-secondary cancel-edit-btn">取消</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 员工详情模态框 -->
<div id="detail-modal" class="modal">
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <div class="card-header">
      <h2 class="card-title" id="modal-employee-name">员工详情</h2>
    </div>
    <div class="detail-container" id="modal-employee-detail"></div>
  </div>
</div>

</body>
</html>